<template>
  <div class="yhsyl_box">
    <div ref="chartColumn" style="width: 100%; height: 405px"></div>
  </div>
</template>
<script>
import * as echarts from "echarts";
export default {
  name: "page",

  props: {
    dataList: {
      type: Array,
      // default: [],
    },
  },
  mounted() {
    // 在通过mounted调用即可

    this.$nextTick(() => {
      this.echartsInit();
    });
  },
  methods: {
    //初始化echarts
    echartsInit() {
      this.dataList.forEach((e) => {
        e.value = e.num;
        e.name = e.attribute;
      });
      let myChart = this.$echarts.init(this.$refs.chartColumn);
      // 指定图表的配置项和数据
      let option = {
        title: {
          x: "2%",
          y: "2%",
          textStyle: {
            fontWeight: 400,
            fontSize: 14,
            color: "#7B8497",
          },
          text: '银行接口各银行使用率',
        },
        color: [
          "#fd7f0e",
          "#04f9fa",
          "#16bd87",
          "#1aa3ff",
          "#ff633c",
          "#ffc722",
        ],
        backgroundColor: "",
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}：{c} ({d}%)",
        },
        legend: {
          show:false,
          bottom: "10%",
          itemWidth: 10,
          itemHeight: 10,
          textStyle: {
            color: "#4F5C74",
            fontSize: "14",
          },
        },
        series: [
          {
            name: "各银行使用率",
            type: "pie",
            center: ["50%", "50%"],
            radius: ["35%", "50%"],
            label: {
              normal: {
                formatter: (params) => {
                  return "{value|" + params.value + "}";
                },
                rich: {
                  icon: {
                    fontSize: 16,
                  },
                  value: {
                    fontSize: 16,
                    color: "#8990A2",
                    padding: [4, 0, 0, 4],
                  },
                },
              },
            },
            data:this.dataList,
            itemStyle: {
              borderWidth: 6, //扇区间隔大小
              borderColor: "#FBFBFB", //和背景色保持一致
            },
          },
        ],
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
  },
};
</script>
<style scoped lang="scss">
.yhsyl_box{
  width: 100%;
  height: 100%;
  // background-color: red;
}
</style>
